Перше, що нам знадобиться, це відповісти на низку запитань:
Для тестового пакету зазначимо такі вимоги:
Як прототип використовуватиметься цей малюнок (знайдений тут):
За роботу!
І відразу - стоп! Перше, що важливо пам'ятати про іконки - їх багато! І у кожної - багато розмірів! А це означає, що доведеться виконати колосальну кількість нудної, одноманітної роботи.
Тому найперше, про що потрібно подумати - це як максимально автоматизувати увесь процес і виключити з нього рутину. Практика показує, що краще витратити тиждень на обдумування автоматизації процесу, чим три дні повторювати одноманітні дії. Тому що вже до кінця першого дня ви тихо ненавидітимете ваш пакет іконок і мріятимете про його завершення.
Знадобляться такі програми:
Програми підбиралися так, щоб вони були досить знайомі і обов'язково максимально автоматизували процес. В результаті був зроблений такий вибір:
Шляхом довгих міркувань були визначені такі питання, які рутинні, але можуть бути автоматизовані:
Photoshop має чудовий інструмент, який дозволяє зберігати зображення як набір фрагментів. Це Файл \ Зберегти для Веб. От як це працює. Спершу за допомогою інструменту "розкроювання" на зображенні виділяються області, які відповідатимуть розмірам іконок:
Далі, власне виконується команда Файл \ Зберегти для Веб. У вікні, що з'явилося, для кожного раніше розкроєного фрагмента виставляється формат "PNG-24":
У вікні збереження вибираються "тільки зображення" і "користувацькі фрагменти"; до речі кажучи, ім'я файлу взагалі ніяк не бере участь у збереженні, так що його можна писати будь-яке:
В результаті після збереження в підтеці "images" збереглися усі потрібні зображення, готові для імпорту в іконку. Перший пункт виконаний!
Плануються дві відмінності іконок: колір і розширення.
Для швидкої зміни кольору в Photoshop використовуватимуться шари, що коригують, з маскою ("колірний тон/насиченість" та "рівні").
А ось з розширеннями не усе так просто: якщо з великими розмірами усе добре, то для дрібних розмірів розширення треба малювати попіксельно, щоб вони були чіткі. Або ж використовувати особливі шрифти. Пошук по інтернету знайшов два правильні шрифти: Munro та Wendy. Таким чином обидва аспекти створення нової іконки з існуючої автоматизовані.
Тут усе просто: Microangelo Studio підтримує імпорт зображень без додаткових питань, якщо ці зображення на нього просто перетягнути. Причому перетягнути можна усі зображення відразу. Єдиний недолік - збереження в новий файл не має клавіатурного скорочення, тобто його доведеться кожного разу виконувати через головне меню.
Спершу був намальований найбільший розмір. Вийшло дуже схоже, хоча фон довелося використати дещо іншій:
Далі копії усіх шарів іконки об'єднувалися і зменшувалися до нового цільового розміру, наприклад, до 96х96. Отримане зображення використовувалося як підкладка при малюванні зменшеного зображення. При цьому елементи підганялися так, щоб мати чіткі межі. Навіть якщо це не відповідало зображенню свого великого брата.
Зрештою були намальовані усі розміри. Для розміру 16х16 не вийшло додати розширення, тому доведеться обійтися без нього:
Далі, щоб швидко міняти відтінок значка, додаються коригуючі шари-фільтри, з растровою маскою:
На цьому створення розмірів іконки (першоджерела) завершене. У нім передбачені усі розміри, автоматизовано розширення і відтінок, усе подано наглядно.
Іконки плейлістів і аудіо створюються аналогічним чином.
Після того, як в теку Images збережені всі розміри однієї іконки, виконується наступна послідовність:
Після усіх маніпуляцій іконка "зберігається як" (з ім'ям цільового розширення, щоб не плутатися).
Зверніть увагу: перелік розмірів справа має обмеження за розміром передперегляду в 48х48 пікселів. Тому тут добре видно, що було б, якби при створенні малих розмірів ми пішли шляхом простої зміни розміру.
Нарешті, настає момент, коли на нас починає працювати уся наша автоматизація. Для створення наступної іконки потрібно п'ять простих дій:
Таким чином, на кожну іконку витрачатиметься максимум хвилина. І те, лише для того, щоб підібрати іконці колір. В результаті усього через 15-20 хвилин усі іконки збережені і готові до наступного кроку.
Створення бібліотеки іконок виконується так:
У результаті, бібліотека іконок набула наступного вигляду:
Зверніть увагу: для зручності і функціональності спершу йдуть три іконки типів, потім - іконки розширень в тому вигляді, в якому вони йдуть в типах файлів Light Alloy. Така організація не обов'язкова, але дуже полегшить життя на наступному етапі. І пам'ятаємо про нульову іконку!
Файл опису створюється відповідно до правил, описаних в теорії створення іконок для Light Alloy.
<?xml version="1.3"?> <ICONLIB> <AUTHOR name="Gilorn" email="" homepage="http://www.light-alloy.ru" comments="16x32x48x96x256 (RGB + alpha)"/> <ICONS> <ICON id="0" ext="3GP,ASF,AVS,EVO,BIK,TP,QT,RM,RMVB,RV,TS,WEBM,WTV,DVR-MS"/> <!-- video --> <ICON id="1" ext="AIF,AIFC,AIFF,APE,AT3,AU,CDA,DTS,KAR,M4A,MID,MIDI,MKA,MOD,MP1,MP2,MPA,MPC,OMA,RA,RAM,RMI, SND,AMR,AOB,IT,MO3,S3M,WV,XM,OPUS,TAK"/> <!-- audio --> <ICON id="2" ext="ASX,BDMV,IFO,LST,MPLS,PLS"/> <!-- playlist --> <ICON id="3" ext="LAP"/> <ICON id="4" ext="CUE"/> <ICON id="5" ext="M3U,M3U8"/> <ICON id="6" ext="AVI,DIVX"/> <ICON id="7" ext="MPE,MPEG,MPG,MPV,VOB,MTS,M2TS,M1V,M2V"/> <ICON id="8" ext="MKV"/> <ICON id="9" ext="F4V,FLV"/> <ICON id="10" ext="MP4,M4V"/> <ICON id="11" ext="HDMOV,MOV"/> <ICON id="12" ext="OGM,OGX,OGV"/> <ICON id="13" ext="WM,WMV"/> <ICON id="14" ext="AAC"/> <ICON id="15" ext="AC3"/> <ICON id="16" ext="FLAC"/> <ICON id="17" ext="MP3"/> <ICON id="18" ext="OGG"/> <ICON id="19" ext="WAV"/> <ICON id="20" ext="WMA"/> </ICONS> </ICONLIB>
Конструкція виду "<!-- video -->" є коментарем. Він дозволяє робити позначки для власних потреб, які ігноруватимуться при обробці файлу програмами.
І ось, нарешті свіжий пакет іконок готовий. Залишилося тільки перевірити, що імена файлу опису і бібліотеки іконок співпадають, і - готово!